jss-default-unit

JSS plugin that adds units to numeric values

Provide plain numeric values in your JSS style definitions, and the plugin will insert the apposite units. Defaults to px for sizes, ms for durations, and % for transform origins, and these can be customized easily (see Usage Example).

Make sure you read how to use plugins in general.

Demo - JSS


Usage example

import jss from 'jss'
import defaultUnit from 'jss-default-unit'

// Optionally customize default units.
const options = {
  'line-height': 'rem',
  'font-size': 'rem'
}

jss.use(defaultUnit(options))

// Define styles.
const styles = {
  container: {
    'line-height': 3,
    'font-size': 1.7,
    'height': 200,
    'z-index': 1
  }
}

let sheet = jss.createStyleSheet(styles)

console.log(sheet.toString())

Generates the following stylesheet:

.container-0-0 {
  line-height: 3rem;
  font-size: 1.7rem;
  height: 200px;
  z-index: 1;
}

Issues

File a bug against cssinjs/jss prefixed with [jss-default-unit].

Run tests

npm i
npm run test

License

MIT